<template>
  <div>
    <panel-opc-header />
    <edit-opc ref="form" />
    <panel-opc-table ref="opcTable" :data="filtedData" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  components: {
    panelOpcHeader: () => import('@components/PanelOpcHeader.vue'),
    editOpc: () => import('@components/EditOpc.vue'),
    panelOpcTable: () => import('@components/PanelOpcTable.vue')
  },
  data() {
    return {
      filter: null, opcList: [], tagList: [], machineList: [], buildingList: [], data: []
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    filtedData: function() {
      return this.filterData()
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    filterData() {
      if (this.filter && this.filter.trim()) {
        return this.data.filter(item =>
          item.opc.id.toLowerCase().indexOf(this.filter.trim().toLowerCase()) !== -1 ||
          item.opc.name.toLowerCase().indexOf(this.filter.trim().toLowerCase()) !== -1
        )
      } else {
        return this.data
      }
    },
    operate(scope) {
      // 向子组件传值
      var _this = this.$refs.form
      _this.buildingList = this.buildingList
      _this.tagList = this.tagList
      _this.machineList = this.machineList
      _this.opcList = this.opcList
      // 修改u
      if (scope.row !== undefined) {
        // response.tags = []
        _this.form = scope.row
        _this.isAdd = false
        _this.dialog = true
      } else {
      // 新增
        _this.form = {}
        _this.isAdd = true
        _this.dialog = true
      }
    },
    async initBindList() {
      const dataObj = await this.service.getBindOpc()
      console.log(dataObj)

      this.data = dataObj.data
    },
    async init() {
      // 获取OPC列表
      const opcListObj = await this.service.getUnbindOpc()
      // 获取tag列表
      const tagListObj = await this.service.getTag()
      // 获取建筑列表
      const buildingListObj = await this.service.getBuilding()
      const stationBuildingListObj = await this.service.getStationBuilding()
      const stationMachineListObj = await this.service.getStationMachine()
      console.log(stationBuildingListObj)
      console.log(stationMachineListObj)

      // 获取设备列表
      const machineListObj = await this.service.getMachine()
      // 获取列表数据对象，赋值
      if (opcListObj) {
        this.opcList = opcListObj.data
      }
      if (tagListObj) {
        this.tagList = tagListObj.data
      }
      if (buildingListObj) {
        this.buildingList = buildingListObj.data
      }
      if (machineListObj) {
        this.machineList = machineListObj.data
      }
    }
  }
}
</script>
